<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对React的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Left :addComment="addComment"/>
      <Right :commentList="commentList" :deleteComment="deleteComment"/>
    </div>
  </div>
</template>

<script>
import Left from './components/Left'
import Right from './components/Right.vue'
import {nanoid} from 'nanoid'
export default {
  name: 'App',
  components: {
    Left,
    Right
  },
  data(){
    return{
      commentList:[
        {id:nanoid(),userName:"林冲",commentContent:"奸贼,我与你自幼相交,今日倒来害我,怎不干你事!且吃我一刀。"},
        {id:nanoid(),userName:"晁盖",commentContent:"他日若遂凌云志，敢笑黄巢不丈夫自幼曾读经书，长成亦有权谋，恰如猛虎卧荒丘，潜伏爪牙忍受"},
        {id:nanoid(),userName:"鲁智深",commentContent:"俺便不及关王？他也只是个人。"},
        {id:nanoid(),userName:"王富贵",commentContent:"手如柔荑，肤如凝脂，领如蝤蛴，齿如瓠犀，螓首蛾眉，巧笑倩兮，美目眇兮。"},
      ],
    }
  },
  // 添加一条评论
  methods:{
    addComment(comment){
      comment.id = nanoid();
      this.commentList.push(comment);
      
    },
    // 删除一条评论
    deleteComment(index){
      this.commentList.splice(index,1);
    }
  }
  
}
</script>

<style>

</style>
